<template>
  <div class="print-boxbody">
    <div class="dayCheck-box" id="printMe">
      <div style="page-break-after:always">
        <div class="dayCheck-header">
          餐饮环节周排查表格
        </div>
        <div class="dayCheck-title">
          <div class="dayCheck-title-left">
            单位名称：{{ printData ? printData.schoolName : '' }}
          </div>
          <div class="dayCheck-title-right">
            检查时间：{{ printData ? printData.update_time.split(' ')[0] : '' }}
          </div>
        </div>
        <div class="dayCheck-table">
          <div class="dayCheck-table-in">
            <div class="dayCheck-table-th">
              <div class="dayCheck-table-td">
                项目内容
              </div>
              <div class="dayCheck-table-td">
                序号
              </div>
              <div class="dayCheck-table-td">
                检查内容
              </div>
              <div class="dayCheck-table-td">
                不符合说明
              </div>
              <div class="dayCheck-table-td">
                <span>责任人</span>
                <span>整改时限</span>
              </div>
            </div>
            <template v-for="(item, index) in tableList">
              <div class="dayCheck-table-tr" :key="item.id" v-if="index<4">
                <div class="dayCheck-table-td">
                  {{ item.name }}
                </div>
                <div class="dayCheck-table-td tr-content">
                  <div class="td-list" v-for="child_ in item.children" :key="child_.id">
                    <div class="td01">
                      <i v-if="child_.is_keynote">*</i>{{ child_.number }}
                    </div>
                    <div class="td02">
                      {{ child_.name }}
                    </div>
                    <div class="td03">
                      <div class="dayCheck-table-td-box">
                        <p>

                      <span class="box-i-span">
                  <span class="box-i-span-in" v-if="Number(child_.is_qualified)==1">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
                          是
                        </p>
                        <p>

                      <span class="box-i-span">
                  <span class="box-i-span-in" v-if="!Number(child_.is_qualified)">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
                          否
                        </p>
                        <p v-if="child_.is_rational">

                      <span class="box-i-span">
                  <span class="box-i-span-in" v-if="Number(child_.is_qualified)==2">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
                          合理却项
                        </p>
                      </div>
                    </div>
                    <div class="td04">
                      {{ child_.result || '' }}
                    </div>
                    <div class="td05">
                      <p>{{ child_.checkUser || '' }}</p>
                      <p>{{ child_.end_time || '' }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div style="page-break-after:always">
        <div class="page02">
          <template v-for="(item, index) in tableList">
            <div class="dayCheck-table-tr" :key="item.id" v-if="index<8 && index>3">
              <div class="dayCheck-table-td">
                {{ item.name }}
              </div>
              <div class="dayCheck-table-td tr-content">
                <template v-for="(child_, child_index) in item.children">
                  <div class="td-list" :key="child_.id" v-if="index<7 || (index==7&& child_index<3)">
                    <div class="td01">
                      <i v-if="child_.is_keynote">*</i>{{ child_.number }}
                    </div>
                    <div class="td02">
                      {{ child_.name }}
                    </div>
                    <div class="td03">
                      <div class="dayCheck-table-td-box">
                        <p>

                      <span class="box-i-span">
                  <span class="box-i-span-in" v-if="Number(child_.is_qualified)==1">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
                          是
                        </p>
                        <p>

                      <span class="box-i-span">
                  <span class="box-i-span-in" v-if="!Number(child_.is_qualified)">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
                          否
                        </p>
                        <p v-if="child_.is_rational">

                      <span class="box-i-span">
                  <span class="box-i-span-in" v-if="Number(child_.is_qualified)==2">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
                          合理却项
                        </p>
                      </div>
                    </div>
                    <div class="td04">
                      {{ child_.result || '' }}
                    </div>
                    <div class="td05">
                      <p>{{ child_.checkUser || '' }}</p>
                      <p>{{ child_.end_time || '' }}</p>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div style="page-break-after:always">
        <div class="page03">
          <template v-for="(item, index) in tableList">
            <div class="dayCheck-table-tr" :key="item.id" v-if="index>6">
              <div class="dayCheck-table-td">
                {{ item.name }}
              </div>
              <div class="dayCheck-table-td tr-content">
                <template v-for="(child_, child_index) in item.children">
                  <div class="td-list" :key="child_.id" v-if="index>7 || (index==7&& child_index >=3)">
                    <div class="td01">
                      <i v-if="child_.is_keynote">*</i>{{ child_.number }}
                    </div>
                    <div class="td02">
                      {{ child_.name }}
                    </div>
                    <div class="td03">
                      <div class="dayCheck-table-td-box">
                        <p>

                      <span class="box-i-span">
                  <span class="box-i-span-in" v-if="Number(child_.is_qualified)==1">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
                          是
                        </p>
                        <p>

                      <span class="box-i-span">
                  <span class="box-i-span-in" v-if="!Number(child_.is_qualified)">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
                          否
                        </p>
                        <p v-if="child_.is_rational">

                      <span class="box-i-span">
                  <span class="box-i-span-in" v-if="Number(child_.is_qualified)==2">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
                          合理却项
                        </p>
                      </div>
                    </div>
                    <div class="td04">
                      {{ child_.result || '' }}
                    </div>
                    <div class="td05">
                      <p>{{ child_.checkUser || '' }}</p>
                      <p>{{ child_.end_time || '' }}</p>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
        <div class="table-result">
          <div class="table-result-left">
            检查结果
          </div>
          <div class="table-result-right">
            <div class="table-result-right-top">
              <div>检查意见：{{ printData ? printData.propose : '' }}</div>
            </div>
            <div class="table-result-right-footer">
              <div class="weekCheck-table-footer-l">
                检查人（注明职务并签名）：
                <img :src="printData.user_sign" alt="" v-if="printData && printData.user_sign">
              </div>
              <div class="weekCheck-table-footer-r">
                <span>{{ checkTime[0] ? checkTime[0] : '' }}</span>年
                <span>{{ checkTime[1] ? checkTime[1] : '' }}</span>月
                <span>{{ checkTime[2] ? checkTime[2] : '' }}</span>日
              </div>
            </div>
          </div>
        </div>
        <div class="dayCheck-footer">
          <div class="dayCheck-footer-title">
            备注：
          </div>
          <div>1、检查结果符合的打“√”，不符合的打“×”，可根据单位性质经营项目不同合理缺项，在合理缺项前打“√”。</div>
          <div> 2、表中*号项目为重点项，其他项目为一般项。</div>
        </div>
      </div>
    </div>
    <button v-print="'#printMe'" class="btn-print-box">打印</button>
  </div>
</template>

<script>
import checkData from './checkData'

export default {
  name: "dayPrint",
  data() {
    return {
      tableList: [],
      page1: 4,
      page2: 4,
      printData: null,
      checkTime: []
    }
  },
  created() {
    // let a_ = {}
    // for (let item of checkData.data.list) {
    //   if (item.parent_id) {
    //     a_[item.parent_id].child.push(item)
    //   } else {
    //     item.child = []
    //     a_[item.id] = item
    //   }
    // }
    // for (let index in a_) {
    //   this.tableList.push(a_[index])
    // }
  },
  methods:{
    getData(option){
      if (option) {
        this.printData = JSON.parse(option.data) // sign pic;list; detail
        let check_line = {}
        for (let item of this.printData.list) {
          check_line[item.option_id] = JSON.parse(JSON.stringify(item))
        }
        let list_ = JSON.parse(option.list)
        for (let item of list_) {
          for (let child_ of item.children) {
            if (check_line[child_.id]) {
              child_.is_qualified = check_line[child_.id].is_qualified
              child_.result = check_line[child_.id].result
              child_.end_time = check_line[child_.id].end_time
              child_.checkUser = check_line[child_.id].user ? check_line[child_.id].user.realname : ''
            } else {
              child_.is_qualified = 3
            }
          }
        }
        this.tableList = list_
        this.checkTime = this.printData.update_time.split(' ')[0].split('-')
      }
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.print-boxbody {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding: 40px;
  position: relative;
}

.dayCheck-box {
  background: #fff;
  padding: 30px 20px 20px;
  box-sizing: border-box;
  width: 1075px;
  font-weight: 300;
  font-size: 17px;
  font-family: "宋体";
}

.dayCheck-header {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
  font-weight: 300;
}

.dayCheck-title {
  display: flex;
}

.dayCheck-title-left {
  flex: 1;
}

.dayCheck-title-right {
  width: 300px;
}

.dayCheck-table {
  border: 1px solid #777;
  margin-top: 10px;
}

.dayCheck-table-th {
  border-bottom: 1px solid #777;
  height: 40px;
  line-height: 40px;
}

.dayCheck-table-th, .dayCheck-table-tr {
  display: flex;
}

.dayCheck-table-th .dayCheck-table-td:nth-child(1) {
  width: 110px;
}

.dayCheck-table-th .dayCheck-table-td:nth-child(2) {
  width: 60px;
}

.dayCheck-table-th .dayCheck-table-td:nth-child(3) {
  flex: 1;
}

.dayCheck-table-th .dayCheck-table-td:nth-child(4) {
  width: 160px;
}

.dayCheck-table-th .dayCheck-table-td:nth-child(5) {
  width: 160px;
  border-right: none;
}

.dayCheck-table-td {
  border-right: 1px solid #777;
  display: flex;
  /*align-items: center;*/
  justify-content: center;
}

.dayCheck-table-tr {
  border-bottom: 1px solid #777;
}

.dayCheck-table-tr:last-child {
  border-bottom: none;
}

.dayCheck-table-tr .dayCheck-table-td:nth-child(1) {
  width: 110px;
  padding: 10px;
  box-sizing: border-box;
}

.dayCheck-table-tr .dayCheck-table-td:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: none;
}

.tr-content {

}

.tr-content .td-list {
  display: flex;
  border-bottom: 1px solid #777;
}

.tr-content .td-list:last-child {
  border-bottom: none;
}

.tr-content .td01 {
  width: 60px;
  border-right: 1px solid #777;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tr-content .td02 {
  flex: 1;
  border-right: 1px solid #777;
  padding: 16px 10px;
}

.tr-content .td03 {
  width: 140px;
}

.tr-content .td03 {
  width: 120px;
  overflow: hidden;
  padding: 10px;
  border-right: 1px solid #777;
}

.tr-content .td03 p {
  width: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  float: left;
}

.tr-content .td03 p:nth-child(3) {
  width: 100%;
}

.tr-content .td04 {
  width: 160px;
  border-right: 1px solid #777;
  padding: 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 16px;
}

.tr-content .td05 {
  width: 160px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.tr-content .td05 p {
  text-align: center;
}

/**绿色勾*/

.myicon-tick-checked {

  display: inline-block;

  position: relative;

  width: 17px;
  height: 16px;

  border-radius: 50%;

  /*background-color: #2ac845;*/

}


.myicon-tick-checked:before, .myicon-tick-checked:after {

  content: '';

  pointer-events: none;

  position: absolute;

  color: #000;

  border: 2px solid;

  /*background-color: #000;*/

}

.myicon-tick-checked:before {
  width: 0px;
  height: 0px;
  left: 22%;
  top: 65%;
  -webkit-transform: skew(0deg, 50deg);
  transform: skew(0deg, 50deg);

}

.myicon-tick-checked:after {
  width: 7px;
  height: 0px;
  left: 45%;
  top: 42%;
  -webkit-transform: skew(0deg, -50deg);
  transform: skew(0deg, -50deg);

}

.btn-print-box {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  height: 40px;
  line-height: 40px;
  width: 120px;
  background: #20a0ff;
  box-shadow: 0 2px 2px #005b9f;
  text-align: center;
  border-radius: 5px;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  border:none;
}

.box-i-span {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #777;
  position: relative;
  margin-left: 3px;
  margin-right: 10px;
}

.box-i-span-in {
  position: absolute;
  top: -6px;
  left: -5px;
}

.table-result {
  height: 250px;
  display: flex;
  border-style: solid solid solid solid;
  border-width: 1px;
  border-color: #777;
}

.table-result-left {
  width: 110px;
  border-right: 1px solid #777;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-result-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.table-result-right-top {
  height: 150px;
}

.table-result-right-footer {
  flex: 1;
  display: flex;
  align-items: center;
}

.weekCheck-table-footer-l {
  flex: 1;
  display: flex;
  align-items: center;
}

.weekCheck-table-footer-l img {
  height: 60px;
}

.weekCheck-table-footer-r {
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.weekCheck-table-footer-r span {
  display: block;
  padding: 0 10px;
  text-align: center;
}

.dayCheck-footer {
  margin-top: 30px;

}

.page02 {
  border-style: solid solid solid solid;
  border-width: 1px;
  border-color: #777;
}

.page03 {
  border-style: solid solid none solid;
  border-width: 1px;
  border-color: #777;
}

@media print {
  @page {
    size: auto;
  }

  body, html {
    height: auto !important;
  }
}
</style>

